@model WorkFlowCore.BusinessDemo.Web.Models.OrganizationIndexViewModel

<li data-nodeid="@Model.Id">
    <div class="node-content">
        <span class="node-text">@Model.Name</span>
        <div class="node-actions">
            <a asp-action="Create" asp-route-parentId="@Model.Id" class="btn btn-xs btn-success">添加子组织</a>
            <a asp-action="Edit" asp-route-id="@Model.Id" class="btn btn-xs btn-primary">编辑</a>
            <a asp-controller="User" asp-action="AssignOrganization" asp-route-organizationId="@Model.Id" class="btn btn-xs btn-warning">分配用户</a>
        </div>
    </div>
    @if (Model.Users != null && Model.Users.Any())
    {
        <ul class="user-list">
            @foreach (var user in Model.Users)
            {
                <li class="user-item">
                    <i class="bi bi-person-fill"></i>
                    <span>@user.Name</span>
                </li>
            }
        </ul>
    }
    @if (Model.Children != null && Model.Children.Any())
    {
        <ul class="list-group">
            @foreach (var child in Model.Children)
            {
                <partial name="_OrganizationNode" model="child" />
            }
        </ul>
    }
</li>

<style>
    .user-list {
        margin-left: 20px;
        padding: 5px 0;
        list-style-type: none;
    }
    .user-item {
        padding: 3px 10px;
        display: flex;
        align-items: center;
    }
    .user-item i {
        margin-right: 5px;
        color: #6c757d;
    }
    .list-group {
        margin-left: 20px;
        padding: 5px 0;
        list-style-type: none;
        position: relative;
    }
    .list-group:before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -10px;
        border-left: 1px solid #ccc;
    }
    .list-group > li {
        position: relative;
    }
    .list-group > li:before {
        content: "";
        position: absolute;
        top: 15px;
        left: -10px;
        width: 10px;
        border-top: 1px solid #ccc;
    }
    .node-content {
        display: flex;
        align-items: center;
        padding: 5px 10px;
    }
    .node-text {
        flex-grow: 1;
    }
    .node-actions {
        margin-left: 10px;
    }
    .node-actions .btn {
        margin-right: 5px;
    }
</style>
